/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState, useRef } from 'react';
import {
  FooterToolbar,
  ProCard,
  ProForm,
  ProFormDateRangePicker,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormUploadButton,
} from '@ant-design/pro-components';
import { Button, Card, Menu } from 'antd';
const { Item } = Menu;
import styles from './componentStyle.less';
import RichEdit from './richEdit';
import { useIntl } from 'umi';
import { getConfig } from '@/services/api/setting/config';

export default function EmailConfig() {
  const intl = useIntl();
  const menuMap = {
    general: intl.formatMessage({
      id: 'setting.config.tabs.email.general',
      defaultMessage: '通用邮箱',
    }),
    aliyun: intl.formatMessage({
      id: 'setting.config.tabs.email.aliyun',
      defaultMessage: '阿里云邮箱',
    }),
    tencent: intl.formatMessage({
      id: 'setting.config.tabs.email.tencent',
      defaultMessage: '腾讯云邮箱',
    }),
  };
  const getMenu = () => {
    return Object.keys(menuMap).map((item) => <Item key={item}>{menuMap[item]}</Item>);
  };

  const [initConfig, setInitConfig] = useState({
    mode: 'inline',
    selectKey: 'general',
  });

  const renderChildren = () => {
    const { selectKey } = initConfig;
    switch (selectKey) {
      case 'general':
        return <GeneralEmailSetting />;
      case 'aliyun':
        return <AliyunEmailSetting />;
      case 'tencent':
        return <TencentEmailSetting />;
      default:
        return null;
    }
  };

  return (
    <ProCard>
      <div className={styles.main}>
        <div className={styles.leftMenu}>
          <Menu
            mode={initConfig.mode}
            selectedKeys={[initConfig.selectKey]}
            onClick={({ key }) => {
              setInitConfig({
                ...initConfig,
                selectKey: key,
              });
            }}
          >
            {getMenu()}
          </Menu>
        </div>
        <div className={styles.right}>
          <div className={styles.title}>{menuMap[initConfig.selectKey]}</div>
          {renderChildren()}
        </div>
      </div>
    </ProCard>
  );
}

// 通用邮箱
const GeneralEmailSetting = () => {
  const [basicEmail, setBasicEmail] = useState({});
  const emailFormRef = useRef();
  const asyncGetConfigType = async () => {
    const param = { type: '1' };
    getConfig(param).then((res) => {
      const data = {};
      res.data.forEach((item) => {
        data[item.configKey] = item.configValue;
      });
      setBasicEmail(data);
      emailFormRef.current.setFieldsValue(data);
    });
  };

  useEffect(() => {
    setTimeout(() => {
      asyncGetConfigType();
    });
  }, []);
  return (
    <div>
      <ProCard>
        <ProCard>
          <ProForm
            formRef={emailFormRef}
            layout="vertical"
            // onFinish={handleFinish}
            submitter={{
              searchConfig: {
                submitText: '保存',
              },
              render: (_, dom) => dom[1],
            }}
          >
            <ProForm.Group>
              <ProFormText
                width="md"
                name="email_basic_title"
                tooltip="发送邮件时显示的名称"
                label="邮箱显示名称"
                rules={[
                  {
                    required: true,
                    message: '请输入邮件显示名称',
                  },
                ]}
              />
              <ProFormSelect
                options={[
                  {
                    value: 'SSL',
                    label: 'SSL',
                  },
                  {
                    value: 'NOSSL',
                    label: '非SSL',
                  },
                  { value: 'NORMAl', label: 'NORMAl' },
                ]}
                width="sm"
                rules={[
                  {
                    required: true,
                    message: '安全协议',
                  },
                ]}
                name="email_basic_ssl"
                label="安全协议"
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormText
                width="md"
                name="email_basic_host"
                label="邮箱服务地址"
                tooltip="例：smtp.163.com"
                rules={[
                  {
                    required: true,
                    message: '请输入邮箱服务地址',
                  },
                ]}
              />
              <ProFormDigit
                width="sm"
                label="端口"
                tooltip="例：25、465、587"
                name="email_basic_port"
                rules={[
                  {
                    required: true,
                    message: '请输入邮箱服务地址',
                  },
                ]}
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormText
                width="md"
                name="email_basic_username"
                label="邮箱账号"
                rules={[
                  {
                    required: true,
                    message: '请输入邮箱账号!',
                  },
                ]}
              />
              <ProFormText.Password
                width="md"
                name="email_basic_password"
                label="邮箱口令"
                rules={[
                  {
                    required: true,
                    message: '请输入邮箱口令!',
                  },
                ]}
              />
            </ProForm.Group>
          </ProForm>
        </ProCard>
        <ProCard title="邮箱发送测试">
          <ProForm
            layout="vertical"
            // onFinish={handleFinish}
            submitter={{
              searchConfig: {
                submitText: '测试发送',
              },
              render: (_, dom) => dom[1],
            }}
          >
            <ProFormText
              width="md"
              name="title"
              tooltip="测试发送的邮箱"
              label="测试发送的邮箱"
              rules={[
                {
                  required: true,
                  message: '请输入测试发送的邮箱',
                },
              ]}
            />
            <ProFormTextArea
              width="md"
              name="content"
              label="测试发送内容"
              placeholder="测试发送的内容"
              fieldProps={{ rows: '3' }}
              rules={[
                {
                  required: true,
                  message: '请输入测试发送的邮箱',
                },
              ]}
            />
          </ProForm>
        </ProCard>
      </ProCard>
    </div>
  );
};

// 腾讯邮箱
const AliyunEmailSetting = () => {
  return <div>AliyunEmailSetting</div>;
};

// 阿里邮箱
const TencentEmailSetting = () => {
  return <div>TencentEmailSetting</div>;
};
